<template>
    <div id="trunk">
        <template>
		    <vHead appPath="/exercises" appTitle="练习"></vHead>

            <main class="main maxW">
                <div class="test-nav">
                    <div class="test-location">
                        <span>当前班级：</span>
                        <el-select v-model="classid" placeholder="请选择" @change="setClass($event)">
                            <el-option v-for="item of classList" :key="item.id" :label="item.rename" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="test-link">
                        <router-link to="/exercises">首页</router-link>
                        <router-link to="/exercises/task">我的作业</router-link>
                        <router-link class="wrong-txt" to="/exercises/wrong">错题本</router-link>
                        <router-link to="/exercises/volume-library">卷库</router-link>
                    </div>
                </div>
                <div class="test-template exercises-template">
                    <router-view :gradeId="gradeId"/>
                </div>
            </main>
            <vFoot></vFoot>
        </template>
        <div id="backtop" @click='returnTop'>
            <i class="el-icon-caret-top"></i>
        </div>
    </div>
</template>
<script>
import vHead from "@/components/common/header";
import vFoot from '@/components/common/footer';
export default {
    components: { vHead, vFoot },

    data() {
        return {
            classid: '',
            classList: [],

            timer: null,
            bSys: true,
            gradeId:0
        };
    },
    created() {
        this.getClass()
    },
    mounted() {
        // 当网页向下滑动 20px 出现"返回顶部" 按钮
        // 
        document.addEventListener('scroll',  ()=>{
            this.scrollFunction()
        },false)

    },
    methods: {
        scrollFunction() {
            if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
                document.getElementById("backtop").style.visibility = "visible";
            } else {
                document.getElementById("backtop").style.visibility = "hidden";
            }
        },

        // 点击按钮，返回顶部
        returnTop() {
            this.timer = setInterval(() => {
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //获取滚动条距离顶部高度
                var iSpeed = Math.floor((0 - scrollTop) / 9); //Math.floor()向下取整   (0-scrollTop)表示：获取滚动条距离顶部高度的负值

                this.bSys = true; //意味着是系统在滚动，而不是用户


                document.documentElement.scrollTop = scrollTop + iSpeed; //设置滚动条距离顶部位置

                //当滚动条到达顶部，关闭定时器
                if (scrollTop == 0) {
                    clearInterval(this.timer);
                }
            }, 30);
        },
        setClass(val) {
            this.classid = val
            sessionStorage.setItem('classid', this.classid)
        },
        /**
         * 请求科目的数据
         * @author lucky
         * @DateTime 2019-07-22T11:12:14+0800
         * @return   {[type]}                 [description]
         */
        getClass() {
            let success = (res => {
                const data = res.data;
                if(data.length > 0){
                    this.classList = data;
                    this.gradeId = data[0].grade_id;
                    this.classid = data[0].id;
                    sessionStorage.setItem('classid', data[0].id)
                }
            });

            let params = {
                user_id: this.$g.user_id,
                style: 1,
                // data_type:0,
            }

            this.$ajax({
                url: 'api/org/class_userid',
                method: 'get',
                params: params,
                func: { success: success }
            })
        }
    },

};
</script>
<style lang="scss">
.main {
    box-sizing: border-box;
    min-height: calc(100vh - 124px);
    padding: 25px 0 40px;
}

@import "./../../../assets/css/test.scss";
</style>